<template>
	<div id="weatherBG">
		<div class="wapper">
			<div class="row list">
				<el-card :body-style="{ padding: '0px' }" v-for="item in all" :key="item.id" :class="{ current: currentBg === item.src }">
					<div class="img-box"><huxyImage :src="item.src" @load="loaded($event, item)"></huxyImage></div>
					<div class="info-box">
						<div class="info">
							<div class="label">大小</div>
							<div class="value">{{ getSize(item) | formatSize }}</div>
						</div>
						<div class="info">
							<div class="label">尺寸</div>
							<div class="value">{{ getWidthAndHeight(item) }}</div>
						</div>
						<div class="info">
							<div class="value">
								<el-button type="text" @click="delBg(item)">删除</el-button>
								<el-button type="text" @click="showEditForm(item)">编辑</el-button>
								<el-button v-if="currentBg !== item.src" type="text" @click="setCurrent(item.id)">设为当前</el-button>
							</div>
						</div>
					</div>
				</el-card>
				<div class="add jcenter el-icon-plus" @click="showAddForm()"></div>
			</div>
		</div>

		<el-dialog title="新增图片" :visible.sync="showAddFormDialog">
			<el-form :model="addForm" ref="addForm" label-width="60px">
				<el-form-item label="图片">
					<div id="weather-bg-uoload-row">
						<uploadImage @success="handleUploadImageSuccess"></uploadImage>
						<huxyImage v-if="addForm.src" class="img" :src="addForm.src"></huxyImage>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showAddFormDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitAdd">添 加</el-button>
			</div>
		</el-dialog>

		<el-dialog v-if="showEditFormDialog" title="修改图片" :visible.sync="showEditFormDialog">
			<el-form :model="editForm" ref="addForm" label-width="60px">
				<el-form-item label="图片">
					<div id="weather-bg-uoload-row">
						<uploadImage @success="handleUploadImageSuccess"></uploadImage>
						<huxyImage v-if="editForm.src" class="img" :src="editForm.src"></huxyImage>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showEditFormDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitUpdate">修 改</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { $get, $post } from '@/puigins/request.js';
import huxyImage from '@/components/common/huxy-image.vue';
import uploadImage from '@/components/common/uploadImage.vue';
export default {
	name: 'backgroundImage',
	data() {
		return {
			showAddFormDialog: false,
			showEditFormDialog: false,
			all: [],
			addForm: {
				src: ''
			},
			editForm: {
				src: '',
				id: ''
			},
			sizes: [],
			currentBg: undefined
		};
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			this.all = [];
			$get('/admin/img/backgroundImage/getBgList').then(res => {
				if (res.code == 200) {
					this.all = res.data;
				} else {
					this.$msgError(res);
				}
			});

			this.currentBg = undefined;
			$get('/img/backgroundImage/getBackgroundImage').then(res => {
				console.log(res);
				if (res.code == 200) {
					this.currentBg = res.data;
				} else {
					this.$msgError(res);
				}
			});
		},
		showAddForm() {
			this.addForm = {
				weathers: [],
				seasons: [],
				times: [],
				src: ''
			};
			this.showAddFormDialog = true;
		},
		showEditForm(item) {
			this.editForm = Object.assign({}, item);
			this.showEditFormDialog = true;
		},
		handleUploadImageSuccess(e) {
			console.log(this.$g.IMG_URL + e);
			this.addForm.src = this.$g.IMG_URL + e;
			this.editForm.src = this.$g.IMG_URL + e;
		},
		submitAdd() {
			if (this.addForm.src.length === 0) {
				return this.$message.warning('请上传图片');
			}
			$post('/admin/backgroundImage/addBg', this.addForm).then(res => {
				if (res.code == 200) {
					this.$message.success(res.data);
					this.showAddFormDialog = false;
					this.getData();
				} else {
					this.$msgError(res);
				}
			});
		},
		submitUpdate() {
			if (this.editForm.src.length === 0) {
				return this.$message.warning('请上传图片');
			}
			$post('/admin/backgroundImage/updateBg', this.editForm).then(res => {
				if (res.code == 200) {
					this.$message.success(res.data);
					this.showEditFormDialog = false;
					this.getData();
				} else {
					this.$msgError(res);
				}
			});
		},
		loaded(info) {
			this.sizes.push(info);
		},
		getWidthAndHeight(o) {
			let obj = this.sizes.find(item => o.src === item.src);
			if (obj) {
				return obj.width + '*' + obj.height;
			} else {
				return '';
			}
		},
		getSize(o) {
			let obj = this.sizes.find(item => o.src === item.src);
			if (obj) {
				return obj.size;
			} else {
				return null;
			}
		},
		delBg(item) {
			this.$confirm('确定删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					$post('/admin/backgroundImage/delBg', { id: item.id }).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data);
							this.getData();
						} else {
							this.$msgError(res);
						}
					});
				})
				.catch(() => {});
		},
		setCurrent(id) {
			this.$confirm('确定将此图片设为当前背景?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					$post('/admin/backgroundImage/setCurrent', { id }).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data);
							this.getData();
						} else {
							this.$msgError(res);
						}
					});
				})
				.catch(() => {});
		}
	},
	components: {
		huxyImage,
		uploadImage
	},
	filters: {
		formatSize(size) {
			if (size === null) {
				return '';
			}
			if (size < 1024) return '<1KB';
			if (size / 1024 < 1024) return (size / 1024).toFixed(2) + 'KB';
			if (size / 1024 / 1024 < 1024) return (size / 1024 / 1024).toFixed(2) + 'MB';
			return (size / 1024 / 1024 / 1024).toFixed() + 'GB';
		}
	}
};
</script>

<style lang="scss">
#weatherBG {
	.wapper {
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		.row {
			display: flex;
			gap: 15px;
			justify-content: center;
			.item {
				display: flex;
				align-items: center;
				padding: 0 10px;
				.lable {
					padding-right: 10px;
				}
			}
		}
		.list {
			flex-wrap: wrap;
			.current {
				box-shadow: 0 2px 12px 0 rgb(255 0 0 / 80%) !important;
			}
			.img-box {
				width: 300px;
				height: 200px;
			}
			.info-box {
				display: flex;
				flex-direction: column;
				padding: 10px;
				.info {
					display: flex;
					gap: 10px;
				}
			}
			.add {
				width: 300px;
				height: 302px;
				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
				border: 1px solid #ebeef5;
				background-color: #fff;
				color: #303133;
				transition: 0.3s;
				font-size: 60px;
				font-weight: 100;
				cursor: pointer;
				&:hover {
					color: #f00;
				}
			}
		}
	}
}
#weather-bg-uoload-row {
	display: flex;
	gap: 20px;
	.img {
		max-width: 120px;
		width: max-content;
		min-width: 40px;
	}
}
</style>
